<template>
  <div class="replyDiv">
    <!-- 头部按钮 -->
    <div class="headerDiv">
      <div class="headerDiv_left">
          <i :class="rotate ? 'el-icon-refresh rotateGo' : 'el-icon-refresh rotateBack'"  @click="refreshBtn"></i>
          <el-button type="primary" @click="addGroup">添加分组</el-button>
          <el-button type="primary" @click="handleMessage">管理分组</el-button>
      </div>
      <el-form :inline="true" class="demo-form-inline headerDiv_right">
          <el-form-item>
            <el-input v-model="formInline" placeholder="请输入要搜索的分组" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryMessage">查询</el-button>
          </el-form-item>
      </el-form>
    </div>

     <!-- 中间表单 -->
    <div class="contentDiv">
      <el-table
        ref="multipleTable"
        :data="dataShows"
        tooltip-effect="dark"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%"
        :cell-style="tableRowStyle"
        >
        <el-table-column
          :show-overflow-tooltip="true"
          prop="college"
          label="学院"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="empClass"
          label="班别"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="topicTitle"
          label="题目"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="stuName"
          label="选题学生"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="jsName"
          label="老师"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="分组情况"
          align="center"
          >
          <template slot-scope="scope">
            <el-select v-model="scope.row.groupName" clearable placeholder="请选择" @change="selectOption(scope.row)">
              <el-option
                v-for="item in optionDatas"
                :key="item.id"
                :label="item.groupName"
                :value="item.groupName"
                >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          >
          <template slot-scope="scope">
              <el-button type="text" title="查看信息详情" @click="checkMessage(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> 

    <!-- 分页按钮 -->
    <div class="pagingTool">
       <el-pagination background @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current" 
                  :page-size="pageSize"
                  layout="prev, pager, next, jumper, slot, total" 
                  :total="total" class="pageInfo">
          <span id="sure">确定</span>
       </el-pagination>
    </div>

    <!-- 分组模态框 -->
    <el-dialog :title="dialoggroupTitle" :visible.sync="dialogGroupVisible">
      <!-- 添加分组form -->
      <el-form :model="formGroup" v-if="formGroupShow">
        <el-form-item label="组名:" :label-width="formLabelWidth">
          <el-input class="dialogGroup_input" v-model="formGroup.groupName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="答辩地点:" :label-width="formLabelWidth">
          <el-input class="dialogGroup_input" v-model="formGroup.groupAddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- 管理分组table -->
      <el-table
        :data="optionDatas"
        height="250"
        v-if="tableGroupShow"
        style="width: 100%">
        <el-table-column
          prop="groupName"
          label="组名"
          >
        </el-table-column>
        <el-table-column
          prop="groupAddress"
          label="答辩地址">
        </el-table-column>
        <el-table-column
          label="操作"
          >
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveGroup" v-if="formGroupShow">确 定</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" v-if="tableGroupShow">确定</el-button>
      </div>
    </el-dialog>

    <!-- 信息模态框 -->
    <el-dialog class="detailsDialog" title="信息详情" :visible.sync="dialogFormVisible" width="60%">
      <el-form :model="form" class="newsForm">
        <div class="newsformPass">
          <el-form-item label="学院：">
            <div>{{form.college}}</div>
          </el-form-item>
          <el-form-item label="班级：">
            <div>{{form.empClass}}</div>
          </el-form-item>
          <el-form-item label="学生学号：">
            <div>{{form.stuNum}}</div>
          </el-form-item>
          <el-form-item label="学生姓名：">
            <div>{{form.stuName}}</div>
          </el-form-item>
          <el-form-item label="毕设题目：">
            <div>{{form.topicTitle}}</div>
          </el-form-item>
          <el-form-item label="指导老师：">
            <div>{{form.jsName}}</div>
          </el-form-item>
       </div>
       <div class="newsformPass">
          <el-form-item label="分组组名：">
            <div>{{form.groupName}}</div>
          </el-form-item>
          <el-form-item label="答辩地点：">
            <div>{{form.groupAddress}}</div>
          </el-form-item>
          <el-form-item label="答辩申请状态：">
            <div>{{form.applyStep}}</div>
          </el-form-item>
          <el-form-item label="是否同意答辩：">
            <el-select v-model="form.applyPass" placeholder="请选择类型">
              <el-option label="同意答辩" value="通过"></el-option>
              <el-option label="不同意答辩" value="不通过"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="答辩成绩：" >
            <el-input class="detailsDialog_input" v-model="form.groupGrade" clearable autocomplete="off"></el-input>
          </el-form-item>
          <div class="hintWord">提示：若学生能参加答辩请老师改写状态，若无成绩请老师录入成绩！</div>
       </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMessage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    return {
      rotate: false,
      formInline: '',
      tableData: [],
      queryDatas: [],
      optionDatas: [],
      // 分页
      current:1,      //默认显示第一页数据
      pageSize:5,     //每页显示多少条数据
      total:0,        //一共多少条后台数据
      dataShows: [],   //当前显示的数据
      pageNum: 1,     //共有几页
      totalPage: [],  //所有页面的数据
      // 模态框
      dialoggroupTitle: "添加分组",
      dialogGroupVisible: false,
      formGroupShow: false,
      formGroup:{},
      tableGroupShow: false,
      dialogFormVisible: false,
      form: {},
      formLabelWidth: '120px'
    }
  },

  methods: {
    // 刷新按钮事件
    refreshBtn() {
      var self = this;
      if(self.rotate == false){
        self.rotate = true;
      }else {
        self.rotate = false;
      }
      self.gettableList();
      self.$message({
          showClose: true,
          message: '刷新成功！！！',
          type: 'success'
        });
    },

    // 添加分组按钮事件
    addGroup() {
      var self = this;
      self.formGroup = {};
      self.formGroupShow = true;
      self.tableGroupShow = false;
      self.dialogGroupVisible = true;
    },

    // 管理分组按钮事件
    handleMessage() {
      var self = this;
      self.dialoggroupTitle = "管理分组";
      self.tableGroupShow = true;
      self.formGroupShow = false;
      self.dialogGroupVisible = true;
      self.getGroupList();
    },

    // 分组模态框——表格里删除按钮
    handleDelete(id) {
      var self = this;
      const selectList = [];
      selectList.push(id);
      const deleteDatas = {
        idList: selectList,
      }
      axiosRequest("delete","/groupType/del",deleteDatas).then((res) => {
          if (res.data.code === 200) {
              self.getGroupList();
              self.$message({
                showClose: true,
                message: '删除分组信息成功！！！',
                type: 'success'
              });
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    // 查询按钮事件
    queryMessage() {
      var self = this;
      var newTables = self.queryDatas;
      var newsQuerys = self.formInline.toLowerCase();
      let newArrays = [];
      newArrays = newTables.filter( function(e){
         if(JSON.stringify(e).toLowerCase().indexOf(newsQuerys) !== -1){
           return e;
         }
      });
      if(newArrays.length !== 0){
          self.$message({
              message: '查找成功，这是一条成功消息',
              type: 'success'
          });
      } else {
         self.$message({
              message: '我记得没有这一条信息的哦',
              type: 'warning'
          });
      }
      self.total = newArrays.length;
      self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
          for(let i = 0; i < self.pageNum; i++){
            self.totalPage[i] = newArrays.slice(self.pageSize * i, self.pageSize * (i + 1))
          }
      self.dataShows = self.totalPage[self.current - 1];
    },

    // 表格鼠标悬停样式
    tableRowStyle() {
      return `cursor: pointer;`
    },

    // 表格选择分组事件
    selectOption(rowList) {
      var self = this;
      let newArray = [];
      newArray = self.optionDatas.find( (e) => { return e.groupName == rowList.groupName})
      rowList.groupAddress = newArray.groupAddress;
      const newForm = rowList;
      axiosRequest("post","/groupInfo/save",newForm).then((res) => {
          if (res.data.code === 200) {
              self.dialogFormVisible = false;
              self.$message({
                showClose: true,
                message: '分组成功！！！',
                type: 'success'
              });
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    // 查看按钮事件
    checkMessage(row) {
      var self = this;
      self.dialogFormVisible = true;
      self.form = row;
    },

    // 分组模态框——确定按钮
    saveGroup() {
      var self = this;
      const newForm = self.formGroup;
      axiosRequest("post","/groupType/save",newForm).then((res) => {
          if (res.data.code === 200) {
              self.dialogGroupVisible = false;
              self.$message({
                showClose: true,
                message: '保存分组信息成功！！！',
                type: 'success'
              });
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    // 详情模态框——确定按钮
    saveMessage() {
      var self = this;
      const newForm = self.form;
      axiosRequest("post","/groupInfo/save",newForm).then((res) => {
          if (res.data.code === 200) {
              self.dialogFormVisible = false;
              self.$message({
                showClose: true,
                message: '保存成绩成功！！！',
                type: 'success'
              });
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    //每页显示
    handleSizeChange(val) {
      this.pageSize = val;
      this.current=1;
    },

    //显示页
    handleCurrentChange(val) {
      this.current = val;
      this.gettableList();
    },

    // 请求后台题目数据
    gettableList() {
      var self = this;
      axiosRequest("get","/groupInfo/listAll",null).then((res) => {
          if (res.data.code === 200) {
              self.total = res.data.data.length;
              self.tableData = res.data.data;
              self.queryDatas = JSON.parse(JSON.stringify(res.data.data));
              self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
              for(let i = 0; i < self.pageNum; i++){
                self.totalPage[i] = self.tableData.slice(self.pageSize * i, self.pageSize * (i + 1))
              }
              self.dataShows = self.totalPage[self.current - 1];
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },

    // 请求分组信息
    getGroupList() {
      var self = this;
      axiosRequest("get","/groupType/listAll",null).then((res) => {
            if (res.data.code === 200) {
                self.optionDatas = res.data.data;
            } else {
                self.$message({
                  showClose: true,
                  message: '错了哦，请求信息失败了！！！',
                  type: 'error'
                });
              }
        });
    },

  },

  mounted: function(){
    var self = this;
    // 请求后台题目数据
    self.gettableList();

    // 请求分组信息
    self.getGroupList();
  },
}
</script>

<style lang="less" scoped>
.replyDiv {
  padding-left: 10px;
  position: relative;
}

.headerDiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.headerDiv_left {
  width: 35%;
  min-width: 320px;
}

.headerDiv_left > i {
  margin-left: 5%;
  margin-top: 3%;
}

.rotateBack {
  transform: rotate(180deg);
  transition: all 2s;
}

.rotateGo {
  transform: rotate(-180deg);
  transition: all 2s;
}

.headerDiv_left > i:hover {
  color: #218ef3;
  cursor:  pointer;
}

.headerDiv_left /deep/ .el-button {
  margin-top: 4px;
  margin-left: 10%;
  padding: 8px 11px;
}

.headerDiv_right /deep/ .el-button {
  padding: 8px 15px;
}

.headerDiv_right /deep/ .el-input__inner {
    height: 35px;
}

.pagingTool{
  position: absolute;
  top: 458px;
}

#sure {
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin: 0px 15px;
    cursor: pointer;
    width: 4%;
    border-radius: 3px;
}

.detailsDialog /deep/ .el-dialog__body {
  padding: 10px 20px 0px 20px;
}

.newsForm {
  display: flex;
}

.newsForm /deep/ .newsformPass {
  width: 50%;
}

.detailsDialog /deep/.el-form-item {
    margin-bottom: 15px;
}

.detailsDialog_input,.dialogGroup_input {
  width: 60%
}

.hintWord {
  margin-top: 30px;
  font-size: 14px;
  color: red;
  letter-spacing: 3px;
  line-height: 25px;
}

</style>
